/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * =============================================================================
 */

html {
  scroll-behavior: smooth;
}

.container {

  .app {
    font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
    font-size: 16pt;
    display: flex;
    flex-direction: column;
    height: 800px;
    width: 600px;
    box-shadow:
      0 1px 5px rgba(0,0,0,0.12),
      0 1px 3px rgba(0,0,0,0.24);
  }

  .title {
    border-bottom: 0.5px solid #e3e3e3;
    text-align: center;
  }

  .messages {    
    flex: 7 0px;
    display: flex;
    flex-direction: column;    
    overflow-y: scroll;

  }

  .messages > :first-child {
    margin-top: auto !important;
  }

  .message {
    border-radius: 8px;
    margin: 10px;
    padding: 10px;

    &.bot {
      background-color: #f0f4c3;
      align-self: flex-start;
      border-radius: 4px;
      font-size: 20pt;
      margin-left: 50px;
    }

    &.bot:before {
      content: '🤖 ';
      margin-left: -50px;
      margin-right: 30px;
      font-size: 18pt;
    }

    &.input {
      background-color: #64d8cb;
      align-self: flex-end;
    }
  }

  .controls {
    border-top: 0.5px solid #e3e3e3;
    padding: 10px;

    form {
      display: flex;
      flex-direction: row;
    }

    #textbox {
      width: 90%;
      height: 50px;
      font-size: 18pt;
    }

    #submit {
      margin-left:10px;
      font-size: 20px;
      border-radius: 4px;
      padding: 9px;
      background-color: white;
    }
  }

}
